<template>
  <div id="chartBarMain" ref="chartBar" style="width:100%; height:calc(45vh - 56px);margin-top:10px;"></div>
</template>

<script>
import resize from '@/pages/Home/components/mixins/resize'
export default {
  mixins: [resize],
  props: {
    flowList: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  watch: {
    flowList: {
      handler (newValue, oldValue) {
        this.$nextTick(() => {
          this.chart.dispose()
          this.initChart(newValue)
        })
      },
      deep: true // 深度监听
    }

  },
  data () {
    return {
      chart: null,
      alarmList: []
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.initChart(this.flowList)
      // window.addEventListener('resize', () => { this.chart.resize() })
    })
  },
  beforeDestroy () {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    listData (val) {
      this.chart.setOption(this.option({ value: val }))
    },
    option (val) {
      var _that = this
      var data = {
        title: {
          text: this.$t('接口平均速率')
          // textAlign: 'center'
        },
        legend: {
          data: [this.$t('发送流量'), this.$t('接收流量')]
        },
        tooltip: {
          trigger: 'axis',
          enterable: true,
          backgroundColor: 'rgba(255,255,255,0.8)',
          // formatter: '{b}<br />{a0}: {c0}<br />{a1}: {c1}',
          formatter (params) {
            let text = ''
            for (let item of params) {
              if (item.componentIndex === 0) {
                text += `${_that.$t('时间：') + item.name}</br>`
              };
              if (item.seriesName === _that.$t('发送流量')) {
                var name = _that.valueFormation(item.value)
                text += `<span style="color:#DC143C;font-size:18px">●&nbsp;</span><span style="display:inline-block;">${_that.$t('发送流量')}&nbsp:&nbsp${name}</span></br>`
              } else if (item.seriesName === _that.$t('接收流量')) {
                var name1 = _that.valueFormation(item.value)
                text += `<span style="color:#6495ED;font-size:18px">●&nbsp;</span><span style="display:inline-block;">${_that.$t('接收流量')}&nbsp:&nbsp${name1}</span></br>`
              }
            }
            return text
          },
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        toolbox: {
          right: 30,
          feature: {
            saveAsImage: {
              title: this.$t('保存为图片')
            }
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: val.time,
          name: this.$t('时间'),
          width: 1
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          name: this.$t('发送流量'),
          type: 'bar',
          barGap: 0,
          emphasis: {
            focus: 'series'
          },
          itemStyle: {
            color: '#DC143C'
          },
          data: val.tx
        },
        {
          name: this.$t('接收流量'),
          type: 'bar',
          emphasis: {
            focus: 'series'
          },
          itemStyle: {
            color: '#6495ED'
          },
          data: val.rx
        }]
      }
      return data
    },
    initChart (data) {
      this.chart = this.$echarts.init(this.$refs.chartBar)
      this.chart.setOption(this.option(data), true)
    },
    valueFormation (val) {
      if (val > (1024 * 1024 * 1024)) {
        return (val / (1024 * 1024 * 1024)).toFixed(2) + 'GB'
      } else if (val > (1024 * 1024)) {
        return (val / (1024 * 1024)).toFixed(2) + 'MB'
      } else if (val > 1024) {
        return (val / 1024).toFixed(2) + 'KB'
      }
      return val + 'B'
    }
  }
}
</script>
